class IMap {
  constructor(opt) {
    this._init(opt)
  }
  _init(opt) {
    let id = opt.id || 'mapid'
    let center = opt.center || [120.18273066611019, 30.19637640408235]
    let zoom = opt.zoom || 15;
    // let zoomControl = opt.zoomControl || false;
    let tileLayerUrl = opt.tileLayerUrl || 'https://amap.api.alorvalley.com/map/slff/[z]/[x]/[y]'
    let minZoom = 14
    let maxZoom = 19
    let click = opt.click

    let tileLayer = new AMap.TileLayer({
      tileSize: 256,
      getTileUrl: tileLayerUrl,
      zIndex: 100,
      zooms: [minZoom, maxZoom],
      detectRetina: false,
      errorUrl: 'https://slff.oss-cn-hangzhou.aliyuncs.com/map/slff/tiles/transparent.png',
      // opacity: 0.5
    })
    // let tileLayer = new AMap.TileLayer.Flexible({
    //   opacity: 1,
    //   visible: true,
    //   cacheSize: 1000,
    //   zIndex: 100,
    //   zooms: [minZoom, maxZoom],
    //   createTile(x, y, z, success, fail) {
    //     let image = new Image()
    //     image.src = `https://slff.oss-cn-hangzhou.aliyuncs.com/map/slff/tiles/${z}/${x}_${y}.png`
    //     image.onload = () => {
    //       success(image)
    //     }
    //     image.onerror = () => {
    //       fail()
    //     }
    //   }
    // })


    this.map = new AMap.Map(id, {
      zooms: [minZoom, maxZoom],
      viewMode: '2D',
      center: center,
      zoom: zoom || 15,
      keyboardEnable: false,
      resizeEnable: true,
      expandZoomRange: true,
      layers: [tileLayer, new AMap.TileLayer()]
      // layers: [tileLayer]
      // layers: [new AMap.TileLayer.Satellite()]
    })
    // setTimeout(() => {
    //   this.map.add(new AMap.TileLayer())
    // }, 2000);

    // 设置地图限制区域
    let maxBound = new AMap.Bounds([120.05317, 30.252833], [120.067649, 30.269983])
    this.map.setLimitBounds(maxBound)

    this.map.on('click', event => {
      let point = event.lnglat
      // console.log('map_click', point.getLng(), point.getLat())
      if (typeof click === 'function') {
        click({
          x: point.getLng(),
          y: point.getLat(),
          e: event
        })
      }
    })
  }

  getMap() {
    return this.map
  }

  getZoom() {
    return this.map.getZoom()
  }

  addOverlay(marker) {
    this.map.add([marker])
  }

  removeOverlay(marker) {
    this.map.remove([marker])
  }

  setCenterAndZoom(center, zoom) {
    if (zoom == null) {
      this.map.setCenter([center[1], center[0]])
    } else if (center == null) {
      this.map.setZoom(zoom)
    } else {
      this.map.setZoomAndCenter(zoom, [center[1], center[0]])
    }
  }
  resizeContainer() {

  }
  createPoint(obj, data) {
    let icon = null
    if (obj.imageUrl) {
      icon = this.createIcon(obj.imageUrl, {
        iconSize: [obj.iconWidth, obj.iconHeight],
        iconAnchor: [obj.iconWidth / 2, obj.iconHeight / 2],
      })
    }
    let opacity = obj.iconOpacity || 1;
    let rotate = obj.rotate || 0;
    var opt = {
      draggable: !!obj.draggable,
      opacity,
      rotationAngle: rotate,
      imageUrl: obj.imageUrl
    }
    if (icon) opt.icon = icon
    let marker = this.createMarker([obj.latitude, obj.longitude], opt)
    marker._data = obj
    if (data) marker._cdata = data
    if (typeof obj.click === 'function') {
      marker.on('click', obj.click)
    }
    if (typeof obj.drag === 'function') {
      marker.on('dragend', obj.drag)
    }
    return marker
  }

  createMarker(latLng, opt) {
    let width = 36
    let height = 36
    if (opt.icon) {
      let size = opt.icon.getImageSize()
      width = size.getWidth()
      height = size.getHeight()
    }
    let offsetWidth = -width / 2
    let offsetHeight = -height / 2
    let options = {
      position: [latLng[1], latLng[0]],
      offset: new AMap.Pixel(offsetWidth, offsetHeight),
      topWhenClick: true,
      draggable: opt.draggable,
      angle: opt.rotationAngle,
      // angle: 60,
      clickable: true
    }
    if (opt.icon) {
      // options.icon = opt.icon
      options.content = this.createDocument({
        width,
        height,
        opacity: opt.opacity,
        imageUrl: opt.imageUrl
      })
    }
    let marker = new AMap.Marker(options)
    return marker
  }
  createDocument(opt) {
    let div = document.createElement('div')
    div.style.width = opt.width + 'px'
    div.style.height = opt.height + 'px'
    div.style.backgroundImage = `url(${opt.imageUrl})`
    div.style.backgroundSize = '100% 100%'
    div.style.opacity = opt.opacity || 1
    div.className = 'map-customer-marker'
    return div
  }
  addTileLayer(url, minZoom, maxZoom, opt = {}) {
    let tileLayer = new AMap.TileLayer({
      tileSize: 256,
      tileUrl: url,
      zooms: [minZoom, maxZoom],
      ...opt
    })
    return tileLayer
  }
  createIcon(url, opt) {
    let width = opt.iconSize[0]
    let height = opt.iconSize[1]
    let icon = new AMap.Icon({
      size: new AMap.Size(width, height),
      image: url,
      imageSize: new AMap.Size(width, height)
    })
    return icon
  }
}

export default IMap